<template>
  <div class="login-background">
    <div class="login">
      <div class="login-title">登录</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" :status-icon="statusIcon">
    <el-form-item label="用户名" prop="userName">
      <el-input v-model="ruleForm.userName" placeholder="zhhm"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="userPass">
      <el-input v-model="ruleForm.userPass" placeholder="zhhm"></el-input>
    </el-form-item>
    <el-form-item label="用户角色" prop="rolename">
      <el-select v-model="ruleForm.rolename" placeholder="选项1">
        <el-option
          v-for="item in roleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
    </div>
  </div>
</template>
<script>
  import  * as types from './store/types'
  export default {
    data() {
      return {
        labelWidth:'100px',
        statusIcon:true,
        ruleForm: {
          userName : 'name',
          userPass : 'passw',
          rolename : '选项1',
        },
        roleOptions:[
          {
            value: '选项1',
            label: '选项1'
          },{
            value: '选项2',
            label: '选项2'
          },{
            value: '选项3',
            label: '选项3'
          }
        ],
        rules: {
          userName: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          userPass: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          rolename: [
            {required: true, message: '请选择角色', trigger: 'blur'}
          ],
        }
      };
    },
    mounted(){

    },
    methods: {
      submitForm(formName) {
        const _this = this;
        _this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {
              username: _this.ruleForm.userName,
              password: _this.ruleForm.userPass,
              rolename: _this.ruleForm.rolename,
            };
            _this.$message.success('登录成功');
            const user = {
              name: _this.ruleForm.userName
            }
            _this.$store.commit(types.USERS,user);//存储用户信息
            sessionStorage.setItem("user",user.name);
            _this.$router.push('/main');
            // _this.getTheme();//获取主题
            // _this.getMenu();//获取menu
          } else {
            return false;
          }
        });
      },
      getMenu(){
        //获取menu
        const _this = this;
        _this.axios.get('static/data/menu.json')
          .then(response => {
            console.log(response)
            sessionStorage.setItem('menuData',JSON.stringify(response.data.tree));
            _this.$router.push('/main');
         })
      },
      getTheme(){
        //获取主题
        const _this = this;
        _this.axios.get('static/data/theme.json')
          .then(response => {
            sessionStorage.setItem('theme',JSON.stringify(response.data.theme));
          })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
  .login-background{width: 100%;height:100%;background: url('../images/login-bg.jpg') center center no-repeat;}
  .login{width:400px;position:fixed;right:100px;top:200px;
    padding:20px;border:1px solid #ccc;background:#fff;
  }
  .login-title{font-size:24px;color:#333;padding:0px 0px 20px 0;text-align:center;letter-spacing: 20px;
  }
</style>
